<template>
    <div class="tag-box">
        <span v-bind="props" ref="tagRef" class="tag"></span>
    </div>
</template>
<script setup lang="ts">
import { ref, defineProps, onMounted } from 'vue';
const props = defineProps({
    text: {
        type: String,
        default: 'tag',
        required: false,
    },
    theme: {
        type: String,
        default: 'red',
        required: false,
    },
});
const tagRef = ref<HTMLElement>();
const setTheme = () => {
    if (tagRef.value) {
        tagRef.value!.style.backgroundColor = props.theme;
    }
};
const setText = () => {
    if (tagRef.value) {
        tagRef.value!.innerHTML = props.text;
    }
};
onMounted(() => {
    setText();
    setTheme();
});
</script>
<style scoped lang="less">
.tag-box {
    margin: 30px;
    .tag {
        background-color: red;
        color: #ffffff;
        font-size: 18px;
        padding: 10px;
        border-radius: 5px;
    }
}
</style>
